<template>
  <div class="container">
    <div id="pieChart"></div>
  </div>
</template>

<script>
export default {
  name: "pieChartIndex",
};
</script>
<script setup>
import { nextTick, onMounted } from "vue";
import * as echarts from "echarts";
const drawPieCharts = () => {
  const data = [
    {
      "name": "二级区域-二",
      "value": 182.97
    },
    {
      "name": "二级区域-一",
      "value": 182.97
    }
  ]
  const middlePartRightChartOption = {
    title: {
      text: "365.94",
      // 副标题
      subtext: "总用能",
      // 主副标题间距
      itemGap: 20,
      x: "center",
      y: "center",
      top: "110",
      // 主标题样式
      textStyle: {
        fontSize: "25",
        fontWeight: "600",
        color: "#454459",
      },
      // 副标题样式
      subtextStyle: {
        fontSize: "12",
        fontWeight: "400",
        color: "#454459",
        textAlign: "center",
        display: "block"
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: 0,
      top: 20,
      bottom: 20,
      icon: "circle",
      formatter: function(name) {	// 添加
        let total = 0
        let target
        for (let i = 0; i < data.length; i++) {
          total += data[i].value
          if (data[i].name === name) {
            target = data[i].value
          }
        }
        const arr = [
          '{a|' + name + '}',
          '{c|' + target + 'kwh}',
          '{b|(' + ((target / total) * 100).toFixed(2) + '%)}'
        ]
        return arr.join('')
      }
    },
    textStyle: {	// 添加
      padding: [8, 0, 0, 0],
      rich: {
        a: {
          fontSize: 15,
          width: 110
        },
        b: {
          fontSize: 15,
          width: 70,
          color: '#2F3133'
        },
        c: {
          fontSize: 15,
          color: '#2F3133'
        }
      }
    },
    series: [
      {
        name: "区域用能",
        type: "pie",
        radius: ["50%", "80%"],
        avoidLabelOverlap: false,
        center:['50%','50%'],
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  let pieChart = echarts.init(document.getElementById("pieChart"));
  pieChart.setOption(middlePartRightChartOption);
};

onMounted(() => {
  nextTick(() => {
    drawPieCharts();
  });
});
</script>
<style scoped lang="scss">
.container{
  width: 600px;
  height: 272px;
  overflow: hidden;
  border:1px solid red;
}
#pieChart {
  width:800px;
  height:272px;
  position: relative;
  left:-260px;
}
</style>
